<template xmlns="">
  <div class="common-setting-container">
    <el-form ref="form"
             :model="config"
             label-width="25%"
             label-position="left"
             size="mini">
      <el-form-item label="语言">
        <el-select v-model="config.language">
          <el-option
                  v-for="language in languages"
                  :key="language"
                  :label="language"
                  :value="language">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务器IP">
        <el-input v-model="config.serverIp">
          <template slot="prepend">http://</template>
        </el-input>
      </el-form-item>
      <el-form-item label="本地存储位置">
        <el-input v-model="config.datastorePath"></el-input>
      </el-form-item>
      <div class="setting-datastore-path">
        <el-button @click="changeDatastorePath()" size="mini">更改</el-button>
        <el-button @click="openDatastorePath()" size="mini">打开文件夹</el-button>
      </div>
      <el-form-item label="发送消息">
        <!--suppress RequiredAttributes -->
        <el-select v-model="config.smMethod">
          <el-option
                  v-for="smMethod in smMethods"
                  :key="smMethod"
                  :label="smMethod"
                  :value="smMethod">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import winControl from '../../../../main/windowControl.js'

  export default {
    data() {
      return {
        config: {
          language: '',
          serverIp: '',
          datastorePath: '',
          smMethod: ''
        },
        languages: ['简体中文', 'English', '繁体中文'],
        smMethods: ['Enter', 'Ctrl + Enter']
      }
    },
    created() {
      this.config = this.$db.read().get('config').value()
    },
    methods: {
      changeDatastorePath() {
        const that = this
        // 选择本地文件夹
        const inputElement = document.createElement('input')
        inputElement.setAttribute('id', '_el')
        inputElement.setAttribute('type', 'file')
        inputElement.setAttribute('style', 'visibility: hidden')
        inputElement.setAttribute('style', 'display: none')
        inputElement.setAttribute('webkitdirectory', '')
        inputElement.setAttribute('directory', '')
        document.body.appendChild(inputElement)
        // 添加事件监听
        inputElement.addEventListener('change', function() {
          const input = document.getElementById('_el')
          const files = input.files
          try {
            if (files.length > 0) {
              that.$set(that.config, 'datastorePath', files[0].path)
            }
            inputElement.removeEventListener('change', function() {
            })
            document.body.removeChild(inputElement)
          } catch (e) {
            console.error(e)
          }
        })
        inputElement.click()
      },
      openDatastorePath() {
        winControl.openPath(this.config.datastorePath)
      },
      updateConfig() {
        this.$db.read().set('config', this.config).write()
      }
    }
  }
</script>
